<template>
	<view class="layout">
        <view class="layout-item" v-for="item in lists" :key="item.name">
            <view class="layout-item-title">{{ item.name }}</view>
            <jk-cell-group>
                <jk-cell v-for="c in item.children" :key="c.name" :title="c.name" :is-link="!!c.url" :url="c.url"></jk-cell>
            </jk-cell-group>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                lists: [
                    {
                        name: '布局组件',
                        children: [
                            {
                                name: 'Layout 栅格布局',
                                url: '../layout/layout'
                            },
                            {
                                name: 'Grid 宫格',
                                url: '../grid/grid'
                            },
                            {
                                name: 'Panel 面板',
                                url: ''
                            },
                            {
                                name: 'List 列表',
                                url: '../cell/cell'
                            },
                            {
                                name: 'Card 卡片',
                                url: '../card/card'
                            },
                        ]
                    },
                    {
                        name: '基础组件',
                        children: [
                            {
                                name: 'Button 按钮',
                                url: ''
                            },
                            {
                                name: 'Color 色彩',
                                url: ''
                            },
                            {
                                name: 'Icon 图标',
                                url: '../icons/icons'
                            },
                        ]
                    },
                    {
                        name: '导航组件',
                        children: [
                            {
                                name: 'TabBar 标签页',
                                url: ''
                            },
                            {
                                name: 'Tabs 标签页',
                                url: ''
                            },
                            {
                                name: 'Drawer 抽屉',
                                url: '../drawer/drawer'
                            },
                            {
                                name: 'Page 分页',
                                url: ''
                            },
                            {
                                name: 'Step 步骤条',
                                url: ''
                            },
                            {
                                name: 'NoticeBar 通告栏',
                                url: ''
                            },
                            {
                                name: 'Index 索引选择器',
                                url: ''
                            },
                            {
                                name: 'Sticky 吸顶容器',
                                url: ''
                            },
                        ]
                    },
                    {
                        name: '操作反馈',
                        children: [
                            {
                                name: 'ActionSheet 动作面板',
                                url: '../actionsheet/actionsheet'
                            },
                            {
                                name: 'Toast 轻提示',
                                url: ''
                            },
                            {
                                name: 'Modal 对话框',
                                url: '../modal/modal'
                            },
                            {
                                name: 'Message 全局提示',
                                url: ''
                            },
                            {
                                name: 'Spin 加载中',
                                url: ''
                            },
                            {
                                name: 'Swipeout 滑动菜单',
                                url: ''
                            },
                        ]
                    },
                    {
                        name: '视图组件',
                        children: [
                            {
                                name: 'Badge 徽章',
                                url: ''
                            },
                            {
                                name: 'Alert 警告提示',
                                url: ''
                            },
                            {
                                name: 'Tag 标签',
                                url: '../tag/tag'
                            },
                            {
                                name: 'Progress 进度条',
                                url: '../progress/progress'
                            },
                            {
                                name: 'Avatar 头像',
                                url: ''
                            },
                            {
                                name: 'CountDown 倒计时',
                                url: ''
                            },
                            {
                                name: 'Divider 分隔符',
                                url: '../divider/divider'
                            },
                            {
                                name: 'Collapse 折叠面板',
                                url: ''
                            },
                            {
                                name: 'LoadMore 页底提示',
                                url: ''
                            },
                        ]
                    },
                    {
                        name: '表单组件',
                        children: [
                            {
                                name: 'Input 输入框',
                                url: '../input/input'
                            },
                            {
                                name: 'Radio 单选',
                                url: '../radio/radio'
                            },
                            {
                                name: 'Checkbox 复选',
                                url: ''
                            },
                            {
                                name: 'Switch 开关',
                                url: '../switch/switch'
                            },
                            {
                                name: 'Rate 评分',
                                url: '../rate/rate'
                            },
                            {
                                name: 'InputNumber 数字输入框',
                                url: ''
                            },
                        ]
                    },
                ]
			};
		},
        methods: {
            changes(val){
                console.log(val)
            }
        }
	}
</script>

<style lang="scss">
.layout{
    background-color: #F5F2F0;
    &-item{
        
        &-title{
            font-size: 30upx;
            line-height: 2em;
            padding: 0 20upx;
        }
    }
}

</style>
